<template>
  <div class="mainRevenue clearfix" v-loading="loading">
    <div class="logoBg"><img src="~@/assets/images/common/fiveG.png" /></div>
    <div class="heading">
      收入分析：<span class="redTitle"
        >{{ currentLvlName }}主营收入{{ mainIncrementRate }}%，基本面{{
          basicGapOdbudgetLj
        }}万元
      </span>
    </div>
    <div class="content">
      <div class="tableBox">
        <el-table
          border
          stripe
          style="width: 100%"
          class="tableTh28"
          ref="table"
          :data="tableData"
          :span-method="arraySpanMethod"
          :cell-class-name="rowClass"
          :header-cell-class-name="headerCellClass"
        >
          <el-table-column
            fixed
            label="主营收入完成情况"
            prop="className"
            min-width="90"
          ></el-table-column>
          <el-table-column
            fixed
            label="主营收入完成情况"
            prop="indexName"
            min-width="110"
          ></el-table-column>
          <template>
            <el-table-column label="年累计同比情况">
              <el-table-column
                label="本年累计(亿元)"
                prop="thisYearLjIncome"
                min-width="80"
              >
                <template slot-scope="scope">
                  <span
                    v-if="scope.row.thisYearLjIncome > 0"
                    style="color: #333"
                    >{{ scope.row.thisYearLjIncome }}</span
                  >
                  <span v-else style="color: rgb(255, 0, 0)">{{
                    scope.row.thisYearLjIncome
                  }}</span>
                </template>
              </el-table-column>
              <el-table-column
                label="上年累计(亿元)"
                prop="lastYearLjIncome"
                min-width="80"
              >
                <template slot-scope="scope">
                  <span
                    v-if="scope.row.lastYearLjIncome > 0"
                    style="color: #333"
                    >{{ scope.row.lastYearLjIncome }}</span
                  >
                  <span v-else style="color: rgb(255, 0, 0)">{{
                    scope.row.lastYearLjIncome
                  }}</span>
                </template>
              </el-table-column>
              <el-table-column
                label="增长额(亿元)"
                prop="tbYearInreaseAmt"
                min-width="80"
              >
                <template slot-scope="scope">
                  <span
                    v-if="scope.row.tbYearInreaseAmt > 0"
                    style="color: #333"
                    >{{ scope.row.tbYearInreaseAmt }}</span
                  >
                  <span v-else style="color: rgb(255, 0, 0)">{{
                    scope.row.tbYearInreaseAmt
                  }}</span>
                </template>
              </el-table-column>
              <el-table-column
                label="同比增长率"
                prop="tbYearInrease"
                min-width="80"
              >
                <template slot-scope="scope">
                  <span v-if="tbYearInrease > 0" style="color: #5585bf">{{
                    scope.row.tbYearInrease
                  }}</span>
                  <span v-else style="color: rgb(255, 0, 0)">{{
                    scope.row.tbYearInrease
                  }}</span>
                </template>
              </el-table-column>
              <el-table-column
                label="收入拉动贡献(PP)"
                prop="ldIncome"
                min-width="80"
              >
                <template slot-scope="scope">
                  <span v-if="scope.row.ldIncome > 0" style="color: #5585bf">{{
                    scope.row.ldIncome
                  }}</span>
                  <span v-else style="color: rgb(255, 0, 0)">{{
                    scope.row.ldIncome
                  }}</span>
                </template>
              </el-table-column>
            </el-table-column>
            <el-table-column label="年度预算完成情况">
              <el-table-column
                label="本年预算(亿元)"
                prop="thisYearBudget"
                min-width="80"
              >
                <template slot-scope="scope">
                  <span
                    v-if="scope.row.thisYearBudget > 0"
                    style="color: #333"
                    >{{ scope.row.thisYearBudget }}</span
                  >
                  <span v-else style="color: rgb(255, 0, 0)">{{
                    scope.row.thisYearBudget
                  }}</span>
                </template>
              </el-table-column>
              <el-table-column
                label="年度预算进度"
                prop="completeYearBudget"
                min-width="80"
              >
                <template slot-scope="scope">
                  <span v-if="completeYearBudget > 0" style="color: #5585bf">{{
                    scope.row.completeYearBudget
                  }}</span>
                  <span v-else style="color: rgb(255, 0, 0)">{{
                    scope.row.completeYearBudget
                  }}</span>
                </template>
              </el-table-column>
            </el-table-column>
            <el-table-column label="月累计预算完成情况">
              <el-table-column
                label="月累计预算(亿元)"
                prop="thisYearBudgetLj"
                min-width="80"
              >
                <template slot-scope="scope">
                  <span
                    v-if="scope.row.thisYearBudgetLj > 0"
                    style="color: #333"
                    >{{ scope.row.thisYearBudgetLj }}</span
                  >
                  <span v-else style="color: rgb(255, 0, 0)">{{
                    scope.row.thisYearBudgetLj
                  }}</span>
                </template>
              </el-table-column>
              <el-table-column
                label="月累计预算盈缺(万元)"
                prop="gapOfBudgetLj"
                min-width="80"
              >
                <template slot-scope="scope">
                  <span
                    v-if="scope.row.gapOfBudgetLj > 0"
                    style="color: #5585bf"
                    >{{ scope.row.gapOfBudgetLj }}</span
                  >
                  <span v-else style="color: rgb(255, 0, 0)">{{
                    scope.row.gapOfBudgetLj
                  }}</span>
                </template>
              </el-table-column>
            </el-table-column>
          </template>
        </el-table>
      </div>
      <div class="bottom">
        <div class="desc">
          <div class="growthRate">
            <div class="weightFont">
              <span class="lingxing"></span>收入增长率情况
            </div>
            <span class="normalFont sign"
              >{{ acctMonth }}月，主营收入完成{{ thisMonthMainIncome }}亿元,{{
                mainIncrementAmt
              }}亿元，<span class="normalRedFont"
                >{{ mainIncrementRate }}%。</span
              >
              <span class="normalFont">其中：</span
              ><span class="normalRedFont"
                >基本面收入同比{{ basicTbYearInrease }},产数收入同比{{
                  dictTbYearInrease
                }}</span
              ></span
            >
          </div>
          <div class="budget">
            <div class="weightFont">
              <span class="lingxing"></span>收入预算完成情况：
            </div>
            <div class="normalFont sign">
              {{ acctMonth }}月，完成年度预算的{{
                thisYearMainComplete
              }}%。月累计{{mainGapOfBudget > 0 ? '超额':'未'}}完成预算<span class="normalRedFont"
                >{{ mainGapOfBudget > 0 ? `超额${mainGapOfBudget}`: `缺口${-mainGapOfBudget}` }} 万元</span
              >
            </div>
            <div class="redTitle">{{ noArriveTarget }}万元</div>
          </div>
        </div>

        <div class="echartBox">
          <div class="contentTitle">{{ currentYear }}主营业务收入月走势</div>
          <businessIncome
            :incomeMain="incomeMain"
            :time="currentYear.substr(0, 4)"
          ></businessIncome>
        </div>
        
      </div>
    </div>
  </div>
</template>

<script>
import BusinessIncome from "./charts/page2Chart.vue";
import { $budgetAPI } from "@/api";
import { mergeSpan } from "@/utils/mixin";
export default {
  name: "mainRevenue",
  props: {
    form: {
      type: Object,
      default: {}
    }
  },
  components: {
    BusinessIncome,
  },
  data() {
    return {
      loading: false,
      number: 10,
      thisMonthMainIncome: "",
      currentLvlName: "",
      incrementRate: "",
      basicGapOdbudgetLj: "",
      basicIncrementRate: "",
      dictIncrementRate: "",
      mainIncrementRate: "",
      mainIncrementAmt: "",
      thisYearMainComplete: "",
      noArriveTarget: "",
      acctMonth: "",
      tableData: [],
      spanArr: [],
      currentMonth: "",
      incomeBasicAndICTList: [],
      mainGapOfBudget: [],
      incomeMain: {},
      currentYear: "",
      completeYearBudget: "",
      tbYearInrease: "",
      basicTbYearInrease: "",
      dictTbYearInrease: "",
    };
  },
  created(){
    
  },
  methods: {
    headerCellClass({rowIndex, columnIndex}){
      if(rowIndex == 0){
        if(columnIndex === 0){ return "colspan-2"; }
        if(columnIndex === 1){ return "display-none"; }
      }
    },
    rowClass({ row, column, rowIndex, columnIndex }) {
      if (columnIndex === 5 || columnIndex === 6 || columnIndex === 10) {
        return "rgb196";
      } else if (columnIndex === 2) {
        return "bacColor00";
      } else {
        return "bacColor317eb0";
      }
    },
    arraySpanMethod({ row, column, rowIndex, columnIndex }) {
      if (columnIndex == 0 || columnIndex == 1) {
        return this.spanArr[rowIndex][columnIndex];
      }
    },
    getData() {
      this.loading = true;
      $budgetAPI.getCountyOperationPageTwo(
        { token: this.form.token, areaId: this.form.areaId, acctMonth: this.form.month },
        (res) => {
          if (res && res.code == 0)
            this.mainIncrementAmt = res.content.mainIncrementAmt;
          this.mainIncrementRate = res.content.mainIncrementRate;
          this.currentLvlName = res.content.currentLvlName;
          this.thisMonthMainIncome = res.content.thisMonthMainIncome;
          this.incrementRate = res.content.incrementRate;
          this.basicIncrementRate = res.content.basicIncrementRate;
          this.dictIncrementRate = res.content.dictIncrementRate;
          this.thisYearMainComplete = res.content.thisYearMainComplete;
          this.basicGapOdbudgetLj = res.content.basicGapOdbudgetLj;
          if (this.basicGapOdbudgetLj > 0) {
            this.basicGapOdbudgetLj = "超额" + this.basicGapOdbudgetLj;
          } else {
            this.basicGapOdbudgetLj = "缺口" + this.basicGapOdbudgetLj * -1;
          }
          this.incomeComplete = res.content.incomeComplete;
          this.noArriveTarget = res.content.noArriveTarget;
          this.acctMonth = res.content.acctMonth;
          this.currentMonth = res.content.currentMonth.substring(5, 6) + "月";
          this.currentYear = res.content.currentMonth.substring(0, 4) + "年";
          this.mainGapOfBudget = res.content.mainGapOfBudget;

          this.incomeBasicAndICTList = res.content.incomeBasicAndICTList;
          res.content.incomeAnalysisList.map((item, index) => {
            this.tbYearInrease = item.tbYearInrease;
            this.completeYearBudget = item.completeYearBudget;
            item.tbYearInrease = item.tbYearInrease + "%";
            item.completeYearBudget = item.completeYearBudget + "%";
          });
          this.tableData = res.content.incomeAnalysisList;
          this.basicTbYearInrease = this.tableData[1].tbYearInrease;
          this.dictTbYearInrease = this.tableData[2].tbYearInrease;
          this.spanArr = mergeSpan(this.tableData, ["className", "indexName"]);
          this.incomeMain = res.content.incomeMain;
          this.loading = false;

          this.$nextTick(() => {
            for(let dom of document.querySelectorAll(".colspan-2")){
              dom.setAttribute("colspan", "2");
            }
            this.$refs.table.doLayout();
          })
        },
        (err) => {
          this.loading = false;
        }
      );
    },
  },
};
</script>

<style  lang="scss" scoped>
.mainRevenue {
  padding: 20px;
  border: 1px solid #dee5f3;
  border-radius: 5px;
  margin-top: 20px;
  position: relative;
  .logoBg {
    position: absolute;
    right: 20px;
    top: 20px;
  }
  .heading {
    font-size: 22px;
    font-weight: 700;
    text-align: center;
    padding-bottom: 40px;
    .redTitle {
      color: #c00000;
    }
  }
  .content {
    .tableBox {
      border-top: 1px solid #9abcf1;
      border-left: 1px solid #bfbfbf;
      border-right: 1px solid #bfbfbf;
      border-bottom: 1px solid #bfbfbf;

      /deep/ .el-table tr td {
        &.rgb196 {
          background: rgb(253, 233, 217);
        }
        &.bacColor317eb0 {
          background: rgb(255, 255, 204);
        }
        &.bacColor00 {
          background: rgb(255, 255, 204);
          span {
            color: #c00000 !important;
          }
        }
      }
      /deep/ .el-table {
        .display-none {
          display: none;
        }
        tr:last-child td {
          color: #333;
          text-align: center;
          border-bottom: 1px solid transparent !important;
          border-right: 1px solid #bfbfbf !important;
        }        
      }
      
    }
    .bottom {
      display: flex;
      margin-top: 20px;
      .desc {
        // flex: 1;
        width: 380px;
        display: flex;
        flex-flow: column;
        .growthRate {
          flex: 1;
        }
        .budget {
          flex: 1;
        }
        .weightFont {
          font-size: 18px;
          font-weight: 700;
          margin-bottom: 10px;
          .lingxing {
            width: 10px;
            height: 10px;
            background-color: #c00000;
            transform: rotate(45deg);
            -ms-transform: rotate(45deg); /* Internet Explorer */
            -moz-transform: rotate(45deg); /* Firefox */
            -webkit-transform: rotate(45deg); /* Safari 和 Chrome */
            -o-transform: rotate(45deg); /* Opera */
            margin-right: 7px;
            display: inline-block;
          }
        }
        .redTitle {
          color: #c00000;
          font-size: 18px;
          font-weight: 700;
          margin-top: 10px;
          padding-left: 20px;
        }
        .normalFont {
          font-size: 16px;
          &.sign {
            padding-left: 20px;
            display: inline-block;
            position: relative;
            &::before {
              content: "\2714";
              color: #c00000;
              position: absolute;
              left: 0;
            }
          }
        }
        .normalRedFont {
          font-size: 16px;
          color: #c00000;
        }
        .marg {
          margin-top: 20px;
        }
        .budget {
          margin-top: 20px;
        }
      }
      .echartBox {
        flex: 1;
        margin-left: 10px;
        position: relative;
        padding: 20px 0;

        border: 1px solid #e5e5e5;
        border-radius: 10px;

        .contentTitle {
          position: absolute;
          width: 56%;
          left: 50%;
          top: -14px;
          transform: translateX(-50%);
          font-size: 18px;
          font-weight: 700;
          text-align: center;
          background: #fff;
        }
      }
    }
  }
}
</style>
